<template>
  <!-- 筛选 -->
  <el-row>
    <el-col :span="24">
      <div class="row-col" style="margin: 10px 0" @keyup.enter="query()">
        <el-input
          v-model.number="queryForm.keyword"
          placeholder="请输入手机号"
          style="width: 200px; margin-right: 10px"
          clearablex
        />
        <el-select v-model="queryForm.category_id" placeholder="标签" style="margin-right:10px">
          <el-option label="全部" value />
          <el-option
            v-for="(item, index) in category"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-select v-model="queryForm.hots" placeholder="热门状态" style="margin-right:10px">
          <el-option label="全部" value />
          <el-option label="热门" :value="1" />
          <el-option label="普通" :value="0" />
        </el-select>
        <el-button type="primary" @click="query(queryForm)">筛选</el-button>
        <el-button type="info" @click="reset">重置</el-button>
        <slot name="right" />
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    category: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      queryForm: {
        size: 10,
        current: 1
      },
      // 日期
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      }
    }
  },
  watch: {
    queryForm: {
      handler(val) {
        if (val.createDate === null) {
          this.queryForm.startTime = ''
          this.queryForm.endTime = ''
        }
        if (
          val.memberPhone === '' &&
          val.memberId === '' &&
          val.memberName === ''
        ) {
          this.query()
        }
      },
      deep: true
    }
  },
  methods: {
    query() {
      if (this.queryForm.createDate) {
        this.queryForm.startTime = this.queryForm.createDate[0]
        this.queryForm.endTime = this.queryForm.createDate[1]
        delete this.queryForm.createDate
      }
      this.$emit('query', this.queryForm)
    },
    // 重置
    reset() {
      this.queryForm = {
        size: 20,
        current: 1
      }
      this.query()
    }
  }
}
</script>

<style scoped lang="less">
.search {
  display: inline-block;
}
</style>
